<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调报告生成 - 火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    
    <style>
        .el-menu-demo {
            background-color: #1e40af !important;
        }
        .el-menu--horizontal > .el-menu-item {
            color: white !important;
        }
        .el-menu--horizontal > .el-menu-item:hover {
            background-color: #2563eb !important;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="shadow-md">
            <div class="container mx-auto">
                <el-menu mode="horizontal" class="el-menu-demo" :ellipsis="false">
                    <el-menu-item class="!px-4">
                        <img src="https://via.placeholder.com/40x40" alt="Logo" class="h-8">
                    </el-menu-item>
                    <el-menu-item index="1">
                        <i class="fas fa-search mr-1"></i> 检索
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </el-menu-item>
                </el-menu>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="container mx-auto mt-8 px-4">
            <div class="grid grid-cols-3 gap-6">
                <!-- 左侧面板 -->
                <div class="col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="text-lg font-semibold mb-4">智能助手</h3>
                        <el-tabs>
                            <el-tab-pane label="问询调查">
                                <el-select v-model="selectedRole" placeholder="选择询问对象" class="w-full mb-4">
                                    <el-option label="事故相关人" value="related"></el-option>
                                    <el-option label="目击证人" value="witness"></el-option>
                                    <el-option label="消防人员" value="firefighter"></el-option>
                                </el-select>
                                <el-button type="primary" class="w-full">
                                    <i class="fas fa-file-alt mr-1"></i> 生成询问提纲
                                </el-button>
                            </el-tab-pane>
                            <el-tab-pane label="专家顾问">
                                <el-collapse>
                                    <el-collapse-item title="现场勘验助手" name="1">
                                        <el-button type="success" class="w-full mb-2">
                                            <i class="fas fa-camera mr-1"></i> 现场拍照分析
                                        </el-button>
                                        <el-button type="success" class="w-full">
                                            <i class="fas fa-map-marker-alt mr-1"></i> 现场布局记录
                                        </el-button>
                                    </el-collapse-item>
                                    <el-collapse-item title="物证分析专家" name="2">
                                        <el-button type="warning" class="w-full mb-2">
                                            <i class="fas fa-microscope mr-1"></i> 物证鉴定
                                        </el-button>
                                        <el-button type="warning" class="w-full">
                                            <i class="fas fa-chart-line mr-1"></i> 数据分析
                                        </el-button>
                                    </el-collapse-item>
                                    <el-collapse-item title="法律顾问" name="3">
                                        <el-button type="info" class="w-full mb-2">
                                            <i class="fas fa-balance-scale mr-1"></i> 法规查询
                                        </el-button>
                                        <el-button type="info" class="w-full">
                                            <i class="fas fa-gavel mr-1"></i> 案例分析
                                        </el-button>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>

                <!-- 中间面板 -->
                <div class="col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="text-lg font-semibold mb-4">报告编辑</h3>
                        <el-form label-position="top">
                            <el-form-item label="案件编号">
                                <el-input v-model="caseNumber" placeholder="请输入案件编号"></el-input>
                            </el-form-item>
                            <el-form-item label="火灾地点">
                                <el-input v-model="location" placeholder="请输入火灾地点"></el-input>
                            </el-form-item>
                            <el-form-item label="火灾时间">
                                <el-date-picker
                                    v-model="fireTime"
                                    type="datetime"
                                    placeholder="选择火灾发生时间"
                                    class="w-full">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="报告内容">
                                <el-tabs>
                                    <el-tab-pane label="基本信息">
                                        <el-input
                                            type="textarea"
                                            v-model="basicInfo"
                                            rows="4"
                                            placeholder="请输入基本信息">
                                        </el-input>
                                    </el-tab-pane>
                                    <el-tab-pane label="调查过程">
                                        <el-input
                                            type="textarea"
                                            v-model="process"
                                            rows="4"
                                            placeholder="请输入调查过程">
                                        </el-input>
                                    </el-tab-pane>
                                    <el-tab-pane label="结论建议">
                                        <el-input
                                            type="textarea"
                                            v-model="conclusion"
                                            rows="4"
                                            placeholder="请输入结论建议">
                                        </el-input>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <!-- 右侧面板 -->
                <div class="col-span-1">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                        <h3 class="text-lg font-semibold mb-4">数据分析</h3>
                        <div id="analysisChart" style="width: 100%; height: 300px;"></div>
                        <div class="mt-4">
                            <el-button type="primary" class="w-full mb-2">
                                <i class="fas fa-file-pdf mr-1"></i> 导出PDF报告
                            </el-button>
                            <el-button type="success" class="w-full">
                                <i class="fas fa-share-alt mr-1"></i> 分享报告
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue

        createApp({
            setup() {
                const selectedRole = ref('')
                const caseNumber = ref('')
                const location = ref('')
                const fireTime = ref('')
                const basicInfo = ref('')
                const process = ref('')
                const conclusion = ref('')

                onMounted(() => {
                    const myChart = echarts.init(document.getElementById('analysisChart'))
                    
                    const option = {
                        title: {
                            text: '火灾损失分析'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['直接损失', '间接损失']
                        },
                        xAxis: {
                            type: 'category',
                            data: ['建筑', '设备', '物资', '其他']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '直接损失',
                                type: 'bar',
                                data: [320, 302, 301, 334]
                            },
                            {
                                name: '间接损失',
                                type: 'bar',
                                data: [120, 132, 101, 134]
                            }
                        ]
                    }
                    
                    myChart.setOption(option)
                })

                return {
                    selectedRole,
                    caseNumber,
                    location,
                    fireTime,
                    basicInfo,
                    process,
                    conclusion
                }
            }
        }).use(ElementPlus).mount('#app')
    </script>
</body>
</html> 